<template>
  <div class="wrapper">
    <div class="header">
      <div class="title">搜索</div>
    </div>
    <md-scroll-view class="scroll-view"
                    ref="scrollView"
                    :scrolling-x="false">
      <div class="search-box">
        <div class="search">
          <md-drop-menu :class="'menu-'+tabCurrent"
                        :data="data" :default-value=this.defaultData @change="changeMenu"/>
          <input type="text" class="input" v-model="searchContent" :placeholder="placeholderTest">
          <button type="primary" @click="search" class="btn">查询</button>
        </div>
      </div>
      <md-tab-bar :items="tabList" v-model="tabCurrent"
                  class="tab-bar-list" @change="changeTab"></md-tab-bar>
      <div class="search-list-box">历史搜索
        <md-button type="default" class="btn" @click="searchHistory(item)"
                   v-for="(item,index) in historyList" :key="index"
                   size="small" plain round>
          {{item.SEARCH_CONTENT}}
        </md-button>
      </div>
    </md-scroll-view>
    <dx-footer-bar :msg="1"></dx-footer-bar>
  </div>
</template>

<script type="text/ecmascript-6">
import { Dialog, Toast, ScrollView, ScrollViewRefresh, DropMenu, Button, TabBar } from 'mand-mobile';
import { DxFooterBar } from '@/components';
import { insertCustomerSearch, queryCustomerSearch, insertLineSearch, queryLineSearch } from '@/api/resource';
import store from '@/store';

export default {
  components: {
    DxFooterBar,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [DropMenu.name]: DropMenu,
    [Button.name]: Button,
    [TabBar.name]: TabBar
  },
  computed: {},
  data() {
    return {
      avatar: '',
      data: [
        {
          text: '',
          options: [
            {
              value: 'customerCode',
              text: '客户编号'
            },
            {
              value: 'customerName',
              text: '客户名称'
            }
          ]
        }
      ],
      defaultData: [],
      tabCurrent: '',
      tabList: [
        { name: 'customer', label: '客户' },
        { name: 'business', label: '专线' }
      ],
      searchContent: '',
      searchType: 'customerCode',
      historyList: [],
      placeholderTest: '请输入客户编号'
    };
  },
  beforeRouteEnter(to, from, next) {
    // eslint-disable-next-line
    from.meta.keepAlive = true;
    next();
  },
  beforeRouteLeave(to, from, next) {
    // eslint-disable-next-line
    to.meta.keepAlive = false;
    next();
  },
  created() {
    this.defaultData.push(this.data[0].options[0].value);
    this.queryCustomer();
  },
  methods: {
    search() {
      if (this.searchType === 'customerCode') {
        if (this.searchContent !== '') {
          this.insertCustomer();
        }
        this.$router.push({
          name: 'customer',
          query: {
            timestamp: new Date().getTime(),
            customerCode: this.searchContent,
            customerName: ''
          }
        });
      } else if (this.searchType === 'customerName') {
        if (this.searchContent !== '') {
          this.insertCustomer();
        }
        this.$router.push({
          name: 'customer',
          query: {
            timestamp: new Date().getTime(),
            customerCode: '',
            customerName: this.searchContent
          }
        });
      } else {
        if (this.searchContent !== '') {
          this.insertLine();
        }
        this.$router.push({
          name: 'business',
          query: {
            timestamp: new Date().getTime(),
            productNo: this.searchContent,
            businessType: this.searchType
          }
        });
      }
    },
    searchHistory(item) {
      this.searchType = item.SEARCH_TYPE || item.LINE_TYPE;
      this.searchContent = item.SEARCH_CONTENT;
      this.search();
    },
    changeMenu(barItem, listItem) {
      if (listItem.value === 'customerName' || listItem.value === 'customerCode') {
        this.placeholderTest = `请输入${listItem.text}`;
      } else {
        this.placeholderTest = '请输入产品实例标识';
      }
      this.searchType = listItem.value;
    },
    insertCustomer() {
      const params = {
        search_content: this.searchContent,
        search_type: this.searchType,
        loginName: store.getters.loginName
      };
      insertCustomerSearch(params).then(result => {
        const data = result.success;
        if (data === true) {
          console.log(data);
        } else {
          Dialog.alert({
            title: '提示',
            content: '数据插入失败',
            confirmText: '确定'
          });
        }
      }).catch(() => {
        Toast.succeed('失败!');
      });
    },
    queryCustomer() {
      queryCustomerSearch().then(result => {
        const data = result.data;
        if (data instanceof Array && data.length) {
          this.historyList = data;
        } else {
          this.historyList = [];
        }
      }).catch(() => {
        Toast.failed('失败');
      });
    },
    insertLine() {
      const params = {
        search_content: this.searchContent,
        line_type: this.searchType,
        loginName: store.getters.loginName
      };
      insertLineSearch(params).then(result => {
        const data = result.success;
        if (data === true) {
          console.log(data);
        } else {
          Dialog.alert({
            title: '提示',
            content: '数据插入失败',
            confirmText: '确定'
          });
        }
      }).catch(() => {
        Toast.succeed('失败!');
      });
    },

    queryLine() {
      queryLineSearch().then(result => {
        const data = result.data;
        if (data instanceof Array && data.length) {
          this.historyList = data;
        } else {
          this.historyList = [];
        }
      }).catch(() => {
        Toast.failed('失败');
      });
    },
    changeTab(item) {
      this.defaultData = [];
      this.historyList = [];
      if (item.name === 'business') {
        this.placeholderTest = '请输入产品实例标识';
        this.data = [
          {
            text: '',
            options: [
              {
                value: 'net',
                text: '互联网'
              },
              {
                value: 'trans',
                text: '数据'
              },
              {
                value: 'speech',
                text: '语音'
              },
              {
                value: 'sms',
                text: '短信'
              },
              {
                value: 'apn',
                text: 'APN'
              }
              // {
              //   value: 'mpls',
              //   text: 'MPLS专线'
              // }
            ]
          }
        ];
        this.queryLine();
      } else {
        this.placeholderTest = '请输入客户编号';
        this.data = [
          {
            text: '',
            options: [
              {
                value: 'customerCode',
                text: '客户编号'
              },
              {
                value: 'customerName',
                text: '客户名称'
              }
            ]
          }
        ];
        this.queryCustomer();
      }
      this.tabCurrent = item.name;
      this.searchType = this.data[0].options[0].value;
      this.defaultData.push(this.data[0].options[0].value);
    }
  }
};
</script>

<style lang="stylus" scoped>

  .wrapper
    display : flex
    flex-direction : column
    height : 100%
    background : #fff

  .header
    height : 88px
    line-height : 88px
    text-align : center
    font-size : 36px
    background : theme-color
    color : #fff

  .scroll-view
    flex : 1

  .scroll-view-item
    padding : 30px 0
    text-align : center
    font-size : 28px
    border-bottom : .5px solid #efefef

  .md-drop-menu
    position : relative
    z-index : 1200
    top : 0
    left : 0
    right : 0
    color : #666f83
    font-size : 28px
    font-weight : 500
    width : 30%
    height : 300px

  .md-drop-menu-bar
    height : 3.1rem

  .menu-customer
    height : 300px

  .menu-business
    height : 610px

  .search-box
    height : 120px
    background : #f7f7f7
    .search
      display : flex
      margin : 0 20px
      height : 120px
      .input
        margin : 0 10px
        padding : 0 10px
        width : 55%
        height : 110px
        font-size : 28px
      .btn
        margin-top : 10px
        height : 90px
        font-size : 28px
        line-height : 28px
        width : 15%
        color : #fff
        background : #2f86f6

  .tab-bar-list
    margin : 0 20px
    background : #fff

  .search-list-box
    padding : 20px;
    font-size 28px
    .btn
      margin : 20px 0 20px 20px
      width : 50%
      background : #f1f1f1
      color : #a6a6a6

  .md-button.plain.default::after
    border : solid 0.03rem #f1f1f1
</style>
